<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<style type="text/css">
	    body, html,#allmap {
            width: 100%;
            height: 100%;
            overflow: hidden;
            margin:0;
            font-family:"微软雅黑";}
	</style>
	<script type="text/javascript" src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak=Zhn1mx9j0DN2kJerodG3meJXHFGRMOKv"></script>
	<title>地图展示</title>
</head>
<body>
	<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
    // GL版命名空间为BMapGL
    // 按住鼠标右键，修改倾斜角和角度
	var map = new BMapGL.Map("allmap");    // 创建Map实例
    // 改为我的家乡：重庆
	map.centerAndZoom(new BMapGL.Point(106.456939, 29.541017), 15);  // 初始化地图,设置中心点坐标和地图级别
	map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放

    // 1.地图右下角添加比例尺控件
    var scaleCtrl = new BMapGL.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT});  // 添加比例尺控件
    map.addControl(scaleCtrl);

    // 2.地图右上角添加城市列表控件
    var cityCtrl = new BMapGL.CityListControl({anchor:BMAP_ANCHOR_TOP_RIGHT});  // 添加城市列表控件
    map.addControl(cityCtrl);

    // 3.地图中心点添加信息窗口，窗口标题为“你好”，窗口内容为其它任意文字
    var opts = {
        width: 250,     // 信息窗口宽度
        height: 100,    // 信息窗口高度
        title: "你好"  // 信息窗口标题
    }
    var infoWindow = new BMapGL.InfoWindow("其他任意文字", opts);  // 创建信息窗口对象
    map.openInfoWindow(infoWindow, map.getCenter());        // 打开信息窗口

    // 4.实现事件、检索服务与路线规划中的任意一个内容。
    // 沙坪坝火车站
    var p1 = new BMapGL.Point(106.460664,29.554128);
    //人民解放纪念碑
    var p2 = new BMapGL.Point(106.577034,29.557204);

    var driving = new BMapGL.DrivingRoute(map, {renderOptions:{map: map, autoViewport: true}});
    driving.search(p1, p2);
</script>
